<template>
	<div>
		<div class="grwrap">
			<div class="grzx">
				<div class="grtitle">
					<p>个人中心</p>
				</div>
				<!--交互部分-->
				<div class="left-nav">
					<!--1-->
					<ul class="xuul">
						<div class="leftDaohang">
							<p>交易管理</p>
							<p>></p>
						</div>
						<div class="xuli">
						<a href="#/zhanghu01"><li class="wdzh">我的账户</li></a>
						<a href="#/dingdan01"><li>我的订单</li></a>
						<a href="#/jifen01"><li>我的积分</li></a>
						<a href="#/order01"><li>积分订单</li></a>
						<a><li>我的钱包</li></a>
						</div>
					</ul>
					<!--2-->
					<ul class="xuul">
						<div class="leftDaohang">
							<p>会员资料</p>
							<p>></p>
						</div>
						<div class="xuli">
						<a href="#/ziliao01"><li>个人资料</li></a>
						<a href="#/address01"><li>地址管理</li></a>
						<a href="#/shoucang01"><li>我的收藏</li></a>
						<a href="#/liulan"><li>最近浏览</li></a>
						<a href="#/mima"><li>修改密码</li></a>
						</div>
					</ul>
					<!--3-->
					<ul class="xuul">
						<div class="leftDaohang">
							<p>站内信息</p>
							<p>></p>
						</div>
						<div class="xuli">
						<a href="#/myxiaoxi"><li>我的消息</li></a>
						<a href="#/yijian"><li>意见反馈</li></a>
						</div>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		components: {
			
		},
		methods: {
			leftnav:function(){
				$(".xuli a").click(function(){
					$(this).addClass("nav-left").siblings().removeClass("nav-left");
					$(this).parent().parent().siblings().find("a").removeClass("nav-left");
				});
					$(".xuli a li").click(function(){
					$(this).addClass("nav-li").parent().siblings().find("li").removeClass("nav-li");
					$(this).parent().parent().parent().siblings().find("li").removeClass("nav-li");
				});
				//默认样式
				$(".xuli a li").click(function(){
					$(this).addClass("nav-li").parent().siblings().find("li").removeClass("wdzh");
				});
			}
		},
		mounted: function() {
			this.leftnav();
		},

	}
</script>

<style scoped="scoped">
	.grwrap{
		float: left;
	}
	.grzx{
		width: 170px;
		height: 625px;
		border: 1px solid  #e7e7e7 ;
	}
	.grtitle{
		width: 170px;
		height: 58px;
		border-bottom: 1px solid #e7e7e7;
	}
	.grtitle p{
		font-size: 18px;
		line-height: 58px;
		margin-left: 21px;
		color: #666666;;
	}
	.left-nav{
		width: 170px;
		/*border: 1px solid firebrick;*/
	}
	.xuul{
		/*border: 1px solid cyan;*/
		margin: 20px 21px ;
		width: 59px;
		height: 195px;
		
	}
	.xuul .leftDaohang{
		width: 100px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 16px;
		color: gray;
	}
	.xuli{
		height: 159px;
	}
	.xuli li{
		/*border-bottom: 1px solid #498e3d;
		border: none;*/
		margin-top: 18px;
		text-align: center;
	}
	.nav-left{
		color: #498E3D;
	}
	.nav-li{
		border-bottom: 1px solid #498e3d;
	}
	.wdzh{
		color:#498e3d;
		border-bottom: 1px solid #498e3d;
	}
</style>